import React, { useRef, useEffect, useState } from 'react'
import Taro, { useReady, useDidShow, useDidshow, useRouter } from '@tarojs/taro'
import { View, Text, ScrollView, Input } from '@tarojs/components'
import { Observer, useLocalStore } from 'mobx-react'

import { GoodEle, Direction } from '@/components/Good'
import { orderDetailModel } from '@/model/OrderDetailModel'
import { Icon } from '@/components/Icon'
import './index.scss'
import { orderModel } from "@/model/OrderModel";
import { toDate } from '@/utils/utils'
import Price from '@/components/Price'

export default () => {

  const store = useLocalStore(() => orderDetailModel)
  const id = useRouter().params.id;

  useDidShow(() => {
    store.setId(id);
    store.getData()
    console.log(store.orderDetail);
  })

  return (
    <Observer>
      {
        () =>
          <View className='container'>
            <View className='header'>
              <View className="title">{store.orderDetail.statusText}</View>
              <View className='table__content box'>
                <View className='table__title'>您的座位号是</View>
                <View className='table__number'>{store.orderDetail.table_number}号桌</View>
              </View>
            </View>


            <View className='goods__box box'>
              <View className='ordered'>已点菜品({store.orderDetail.order_goods_number})</View>
              <View className='goods__list'>
                {
                  store.orderDetail.order_goods && store.orderDetail.order_goods.map((it: any, idx: number) => (
                    <GoodEle
                      direction={Direction.ROW}
                      img={it.main_pic}
                      title={it.nick || it.name}
                      desc={it.brief}
                      price={it.price}
                      oldPrice={it.market_price}
                      discount={it.dis}
                      number={it.number}
                      key={it.id}
                      id={it.id}
                      readonly
                    />
                  ))
                }
              </View>

            </View>
            {
              store.orderDetail.people_number > 0 ?
                <View className='box order__info'>
                  <view className='order__item'>
                    <View className='label'>就餐人数</View>
                    <View className='val'>{store.orderDetail.people_number}</View>
                  </view>
                </View> : ''
            }


            <View className='box order__info'>
              <view className='order__item'>
                <View className='label'>菜品金额</View>
                <Price price={store.orderDetail.all_price} type="gray"></Price>
              </view>

              <view className='order__item'>
                <View className='label'>下单时间</View>
                <View className='val'>
                  {toDate(store.orderDetail.create_time)}</View>
              </view>
              {
                store.orderDetail.pay_time > 0 ?
                  <view>
                    <view className='order__item'>
                      <View className='label'>买单时间</View>
                      <View className='val'>{toDate(store.orderDetail.pay_time)}</View>
                    </view>
                    <view className='order__item'>
                      <View className='label'>支付方式</View>
                      <View className='val'>微信支付</View>
                    </view>
                  </view>
                  : ''
              }


              <view className='order__item'>
                <View className='label'>订单总额</View>
                <Price price={store.orderDetail.all_price} type="graybold"></Price>
              </view>
              <view className='order__item'>
                <View className='label'>订单备注</View>
                <View className='val'>{store.orderDetail.note || '-'}</View>
              </view>

              <View className='order__price xxm-hairline--top'>
                实际付款：<Price price={store.orderDetail.all_price} type="sale"></Price>
              </View>
            </View>
          </View>
      }
    </Observer>

  )

}
